<import from="./syntax-tree-view/syntax-tree-view"></import>

<let active-tab.bind="'SyntaxTree'"></let>

<pane-toolbar>
    <div class="tabs">
        <div class="tab-button ${activeTab === 'SyntaxTree' ? 'active' : ''}"
             click.trigger="activeTab = 'SyntaxTree'">
            Syntax Tree
        </div>
    </div>

    <div au-slot="right" id="codePaneToolbarRightPortal"></div>

    <div au-slot="right-end" if.bind="!$parent.isWindow">
        <i class="icon-button pop-out-icon text-gray"
           click.trigger="openExternalCodeWindow()"
           title="Pop Out"></i>
    </div>
</pane-toolbar>

<div class="flex-fill overflow-auto">
    <syntax-tree-view show.bind="activeTab === 'SyntaxTree'"
                      pane.bind="$this"></syntax-tree-view>
</div>
